<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <script>
        /*
            Jquery版本
                1.0 可以兼容到IE8以下
                2.0 只兼容IE8以上
                3.0 只支持最新游览器

            JQ的设计思想
                1.模拟css选择网页元素
                2.独有表达式选择
                3.多种筛选方式

                1.方法函数化
                2.链式操作
                3.取值赋值合体

                js和jq不能混用，可以共存
        */
        window.onload = function () {
            // $("#div1").css("backgroundColor",'red');
            $("[name=hello]").css("backgroundColor",'yellow');
            $("ul li").css("backgroundColor", 'red');
            $("li:first").css("backgroundColor", 'blue');
            $("li:eq(2)").css("backgroundColor", 'green');
            $("ol li").eq(2).css("backgroundColor", 'green');
        }
        $(function(){
            alert("相对于window.onload");
            $("input").click(function(){
                alert("input被点击了");
            })
        })
        $(function(){
            $("#div1").html("<h2>88888</h2>");
            $("input").val("999");
        })
    </script>
</head>

<body>
    <div id="div1">div</div>
    <input type="text" name="hello" id="">
    <ul>
        <li class="box">1111</li>
        <li name="hello">1111</li>
        <li>1111</li>
        <li class="box">1111</li>
    </ul>
    <ol>
        <li>2222</li>
        <li>2222</li>
        <li>2222</li>
        <li>2222</li>
    </ol>
</body>

</html>